<template>
	<view class="container">
		<view class="head">
			<view class="goback" @click="goback"> < </view>
			<view class="title">
				<text>假条详情</text>
			</view>
		</view>
		
		<studentInfo
		    :leaveInfo="studentApplyInfo"
		></studentInfo>
		
		<view class="buttons" v-if="isShowButton">
            <button class="button approve" @click="approveLeave" :disabled="studentApplyInfo.status === 1">批准</button>
            <button class="button reject" @click="rejectLeave" :disabled="studentApplyInfo.status === 2">驳回</button>
        </view>
	</view>
</template>

<script>
	import studentInfo from '../../components/student-Info/student-Info.vue';
	import { teacherSickApproval } from '../../api/sick';
	export default {
		data() {
			return {
				userInfo: {},
				isShowButton: false,
				studentApplyInfo: { 
	                id: "",
	                studentId: "",
	                studentName: "",
	                status: 0, // 0-未审核
	                applyTime: "",
	                startTime: "",
	                endTime: "",
	                message: "",
	                teacherId: "",
	                teacherName: "",
	                classId: "",
	                className: "",
				}
			};
		},
		components: { studentInfo },
		onLoad(options) {
			this.isShowButton = false
			if (options.studentApplyInfo) {
			        try {
						if (!Object.keys(JSON.parse(options.studentApplyInfo)).includes('type')){
							this.isShowButton = true
						}
			            this.studentApplyInfo = JSON.parse(options.studentApplyInfo)
			        } catch (e) {
			            console.error('解析studentApplyInfo失败:', e)
						uni.showToast({
							title:'获取该假条信息失败',
							icon:'none',
							duration:2000
						})
						uni.navigateBack()
			        }
			    }
			console.log(this.studentApplyInfo);
		},
		onShow() {
			this.checkLoginStatus()
		},
		methods: {
			//模拟审批假条
			mockapproveLeave(data) {
			  return new Promise((resolve) => {
			    setTimeout(() => {
			      resolve({
			        code: 200,
			        message: data.status === 1 ? '请假已批准' : '请假已驳回',
			        data: {
			          ...data,
			          updateTime: new Date().toISOString()
			        }
			      })
			    }, 500)
			  })
			},
			
			// 检查登录状态
			checkLoginStatus() {
				const userInfo = uni.getStorageSync('userInfo')
				if (!userInfo) {
					uni.redirectTo({ url: '/pages/login/login' })
					return
				}
				this.userInfo = {
				    name: userInfo.name,
				    teacherId: userInfo.id || '2023111111111', // 使用模拟数据中的ID
				    role: userInfo.roleName // 新增角色信息
				}
			},
			goback(){
				uni.navigateBack()
			},
			approveLeave(){
				if(this.studentApplyInfo.status === 1) return
				this.changeApplyStatus(1)
			},
			rejectLeave(){
				if(this.studentApplyInfo.status === 2) return
				uni.showModal({
				    title: '提示',
				    content: '确定要驳回该假条吗？',
				    success: (res) => {
				      if (res.confirm) { 
						this.changeApplyStatus(2)
				      }
				    }
				});
			},
			
			async changeApplyStatus(nowStatus){
				uni.showLoading({ title:'修改假条审批状态中' })
				try{
					// const res = await teacherSickApproval({...this.studentApplyInfo,status:nowStatus})
					const res = await this.mockapproveLeave({...this.studentApplyInfo,status:nowStatus})
					if(res.code===200){
						uni.showToast({
							title:res.message || '假条审批成功',
							icon:'none',
							duration:2000
						})	
						this.studentApplyInfo.status = nowStatus
						setTimeout(() => {
						    uni.navigateBack()
						}, 500)
					}
				}catch(err){
					uni.showToast({
						title:err.message || '假条审批失败',
						icon:'none',
						duration:2000
					})
				}finally{
					uni.hideLoading()
				}
			}
		}
    };
</script>

<style>
.container {
	display: flex;
    flex-direction: column;
    padding: 120rpx 40rpx 0 40rpx;
    background: rgba(240, 248, 255, 0.9);
    min-height: 100vh;
}

.head{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding-bottom: 30rpx;
	border-bottom: 2rpx solid #e0e0e0;
	margin-bottom: 30rpx;
}

.goback{
	position: absolute;
	left: 10rpx;
	font-size: 40rpx;
}

.title {
    font-weight: bold;
    font-size: 50rpx;
}

.buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40rpx;
}

.button {
    flex: 1;
    margin: 0 20rpx;
    padding: 20rpx;
    border: none;
    border-radius: 20rpx;
    color: white;
    font-size: 32rpx;
    text-align: center;
	font-size: 40rpx;
}

.button[disabled] {
    opacity: 0.7;
    filter: grayscale(30%); 
    transform: none !important;
}

/* 批准按钮禁用状态 */
.button.approve[disabled] {
    background-color: #81C784 !important;
}

/* 驳回按钮禁用状态 */
.button.reject[disabled] {
    background-color: #E57373 !important;
}

.approve {
    background-color: #4CAF50; 
}

.reject {
    background-color: #F44336; 
}

.button:active {
    transform: scale(0.95);
}
</style>